// web/src/app/(employee)/company/[id]/_components/company-navbar.tsx
import React from 'react';
import {Company, Hr, Employee} from "@prisma/client";
import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar";
import {format} from "date-fns";
import Link from "next/link";

interface Props {
    company: Company & {
        Hr: Hr[],
        Employee: Employee[]
    }
}

const CompanyNavbar = ({company}: Props) => {
    return (
        <div className={`bg-blue-900 text-white w-full space-x-2 sticky px-24 top-0 h-24 flex items-center`}>
            <Avatar className={`size-14 mr-2 rounded-md`}>
                <AvatarImage className={`rounded-md`} src={company?.image!}/>
                <AvatarFallback className={`bg-blue-400 text-white rounded-md`}>
                    {company.name.charAt(0).toUpperCase()}
                </AvatarFallback>
            </Avatar>
            <div className={`flex flex-col`}>
                <span className={`text-xl font-bold`}>{company.name}</span>
                <span className={``}>
                    成立于 {format(company.creationTime!, 'yyyy-MM-dd')}
                </span>
            </div>
            <div className={`flex-grow flex-1 ml-auto flex flex-row justify-end`}>
                {/*<Link href={`/company/${company.id}/job/`}>*/}
                <div>
                        <span className={`text-5xl font-bold mr-2`}>{company.Employee.length}
                        </span>在招职位
                </div>
                {/*</Link>*/}
                <div>
                    <span className={`text-5xl font-bold mr-2`}>{company.Hr.length}
                    </span>位Hr
                </div>
            </div>
        </div>
    );
};

export default CompanyNavbar;